<script setup lang="ts">
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {useCommonStore} from "@/store/common";

const image = ref([])
const props = defineProps(['padding', 'item', 'showBottom', 'replay', 'replayInfo'])
let $emit = defineEmits(['replay-info'])
const item = ref({});
item.value = props.item

const commentStore = useCommonStore()

if (item.value.images) {
  image.value = item.value.images.split(',')
}

const toDetail = () => {
  commentStore.commentItem = item.value
  uni.navigateTo({
    url: '/pages/home/commentDetail/commentDetail?id=' + item.value.id
  })
}

const click = () => {
  $emit('replay-info', item.value,'hhhhh')
}
</script>

<template>
  <view class="container" :style="{padding:props.padding+'rpx'}" @click="click()">
    <view class="avatar">
      <up-avatar size="50" :src="item.userAvatar"></up-avatar>
      <text class="name">{{ item.userNickname }}</text>

      <view style="display: flex" v-if="item.parentId && item.parentId != '0' && item.userId != item.parentId">
        <text>@回复&nbsp;</text>
        <text style="color: #007aff">{{ item.parentNickname }}</text>
      </view>
    </view>
    <view class="content">
      <text class="context">
        {{ item.content }}
      </text>
      <up-album multipleSize="120" singleSize="170" :urls="image"></up-album>
    </view>
    <view class="bottom" v-if="props.showBottom">
      <text style="color: #B0B0B0">{{ item.createTime }}</text>
      <view style="display: flex" @click="toDetail()" v-if="item.topCommentId == '0'">
        <text style="margin-right: 10rpx">评论</text>
        <up-icon name="chat" size="20"></up-icon>
      </view>
    </view>
  </view>
</template>


<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  background: white;

  .avatar {
    display: flex;
    align-items: center;

    .name {
      margin: 20rpx 15rpx;
      font-weight: 600;
    }
  }

  .content {
    margin: 15rpx;
    display: flex;
    flex-direction: column;

    .context {
      margin-bottom: 15rpx;
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    margin: 15rpx 20rpx;
  }

}
</style>
